<template>
    <div>
      <div class="card card-custom gutter-b example example-compact" id="tableBody">
        <div class="card-header">
          <div class="card-title">
            <span class="card-icon">
              <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
            </span>
            <h3 class="card-label"> 查询区域 </h3>
          </div>
          <div class="card-toolbar">
            <div class="example-tools justify-content-center">
              <!-- 
                  <span data-toggle="tooltip" class="example-toggle"></span>
                  <span data-toggle="tooltip" class="example-copy"></span> 
                -->
            </div>
          </div>
        </div>
        <div class="card-body">
          <!--查询条件-->
          <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
            <div class="m-portlet__body">
              <div class="form-group m-form__group row">
                <label class="col-form-label">厂商名称:</label>
                <div class="col-md-2">
                  <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
                </div>
                <label class="col-form-label">编码</label>
                <div class="col-md-2">
                  <input type="text" class="form-control" v-model="searchForm.code" placeholder="请输入">
                </div>
                <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2" @click="search()"><span><i
                      class="fa fa-search"></i><span>查询</span></span></b-button>
                <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2" @click="resetAll()">
                  <span><span>清空条件</span></span></b-button>
              </div>
            </div>
            <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
              <div class="m-form__actions m-form__actions--solid">
                <div class="row">
                  <div class="col m--align-left">
                    <button class="btn btn-light-success font-weight-bold mr-2 " @click="addCameraType">
                      <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
                    </button>
  
                    <button class="btn btn-light-primary font-weight-bold mr-2" @click="updateCameraType"
                      :disabled="this.sels.length != 1">
                      <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
                    </button>
                    <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
                    <button class="btn btn-light-danger font-weight-bold mr-2" @click="delCameraType"
                      :disabled="this.sels.length === 0">
                      <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
                    </button>
                  </div>
                  <div class="col m--align-right">
  
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--分页组件-->
        <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
          :data="dataList">
          <!-- 复选框 -->
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column label="序号" min-width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="left" prop="name" show-overflow-tooltip label="厂商名称"
            min-width="150"></el-table-column>
          <el-table-column align="left" prop="code" show-overflow-tooltip label="编码" min-width="150">
  
          </el-table-column>
          <el-table-column align="center" prop="createBy" label="创建人" min-width="150"></el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间" min-width="180"></el-table-column>
          <el-table-column align="center" prop="modifiedBy" label="修改人" min-width="150"></el-table-column>
          <el-table-column align="center" prop="updateTime" label="修改时间" min-width="180"></el-table-column>
          <el-table-column align="center" label="操作" fixed="right">
            <template slot-scope="scope">
              <!--scope.row当前行的对象-->
              <a href="javascript:;" @click="getCameraTypeDetail(scope.row)" class="btn btn-sm btn-clean btn-icon"
                title="详情">
                <span class="svg-icon svg-icon-primary svg-icon-2x">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                    height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <rect x="0" y="0" width="24" height="24" />
                      <path
                        d="M19.2078777,9.84836149 C20.3303823,11.0178941 21,12 21,12 C21,12 16.9090909,18 12,18 C11.6893441,18 11.3879033,17.9864845 11.0955026,17.9607365 L19.2078777,9.84836149 Z"
                        fill="#000000" fill-rule="nonzero" />
                      <path
                        d="M14.5051465,6.49485351 L12,9 C10.3431458,9 9,10.3431458 9,12 L5.52661464,15.4733854 C3.75006453,13.8334911 3,
                                        12 3,12 C3,12 5.45454545,6 12,6 C12.8665422,6 13.7075911,6.18695134 14.5051465,6.49485351 Z"
                        fill="#000000" fill-rule="nonzero" />
                      <rect fill="#000000" opacity="0.3"
                        transform="translate(12.524621, 12.424621) rotate(-45.000000) translate(-12.524621, -12.424621) "
                        x="3.02462111" y="11.4246212" width="19" height="2" />
                    </g>
                  </svg>
                </span>
              </a>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
            layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
          </el-pagination>
        </div>
      </div>
      <cameraTypeAdd ref="cameraTypeAddRef" @change="search"></cameraTypeAdd><!--采用父窗口关闭传递的方法-->
      <cameraTypeUpdate ref="cameraTypeUpdateRef" @change="search"></cameraTypeUpdate><!--采用父窗口关闭传递的方法-->
      <cameraTypeDetail ref="cameraTypeDetailRef"></cameraTypeDetail>
    </div>
  </template>
    
  <script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import cameraTypeAdd from "@/view/monitor/iot-camera-type/iot-camera-type-add.vue";
  import cameraTypeUpdate from "@/view/monitor/iot-camera-type/iot-camera-type-update.vue";
  import cameraTypeDetail from "@/view/monitor/iot-camera-type/iot-camera-type-detail.vue";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js";
  import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
  export default {
    data() {
      return {
        searchForm: { name: "", code: "" },
        dataList: [],
        sels: [], //当前选框选中的值
        pageNo: 1,      // 默认当前是第一页
        pageSize: 5,    // 当前每页的数据是5条
        totalCount: 0   // 总数默认为0
      }
    },
    components: {
      cameraTypeAdd,
      cameraTypeUpdate,
      cameraTypeDetail,
    },
    mounted() {
      this.$store.dispatch(SET_BREADCRUMB, [{ title: "摄像机厂商类型" }]);
      this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
      initList() {
        showWating({ renderBody: "tableBody" });
        var params = {};
        params.usePageNo = true;//采用第几页进行分页（兼容）
        params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
        params.pageNo = this.pageNo;//开始的记录序号   
        params.searchJson = JSON.stringify(this.searchForm);//为form元素     
        apiUtil.queryPage(process.env.VUE_APP_MONITOR_API + "/iotCameraType/list", params).then(({ data }) => {
          this.dataList = data.data;//给结果集赋值
          this.totalCount = data.total;// 获取当前数据的总数    
        });
      },
  
      handleSelectionChange(sels) {//获取选中的值
        this.sels = sels;
      },
      addCameraType() {//新建
        this.$refs.cameraTypeAddRef.showModal()
      },
      updateCameraType() {// 更新
        if (this.sels.length != 1) {
          handleAlert("请选择一条数据", "warning", 3)
          return;
        }
        let id = this.sels.map((item) => item.id);
        this.$refs.cameraTypeUpdateRef.showModal(id);
      },
      delCameraType() { // 删除
        if (this.sels.length === 0) {
          handleAlert("请选择删除的数据", "warning", 3)
          return;
        }
        // 删除前提示
        this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
          let ids = this.sels.map((item) => item.id);
          // 根据后台想要的参数格式选择
          // console.log(ids.join(",")); //1,2,3,4
          // console.log(ids); //[1,2,3,4]
          apiUtil.delete(process.env.VUE_APP_MONITOR_API + "/iotCameraType/delete?id=" + ids.join(",")).then(data => {
            if (data.data.success) {
              handleAlert("删除成功", "success", 3);
              this.search();
            } else {
              handleAlert("删除失败", "error", 3);
            }
          });
        }).catch(() => { });//注意这里，这里是重点！！！;        
      },
      handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
        this.pageSize = val;  // 修改页的大小
        this.initList();       // 按新的pageNo和pageSize进行查询
      },
      handleCurrentChange(val) { // 修改当前页所触发的函数
        this.pageNo = val;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      search() {
        this.pageNo = 1;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      resetAll() {
        Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        this.search();
      },
      getCameraTypeDetail(row) {
        this.$refs.cameraTypeDetailRef.showModal(row.id);
      },
    }
  };
  </script>